<div class="flex flex-col h-[calc(100dvh-6.1rem)] rounded-xl bg-[var(--card-background)] space-y-4">

  <div class="px-6 pt-6 pb-4">
    <h2 class="text-xl font-semibold pb-1">Review Bookdrop Files</h2>
    <p class="text-sm text-gray-400">
      These files were uploaded to the
      <strong class="text-[var(--primary-color)]">Bookdrop Folder</strong>.
      Review their fetched metadata, assign a library and subpath, and finalize where they belong in your collection.
    </p>
  </div>

  @if (loading) {

    <div class="absolute inset-0 flex items-center justify-center z-50 rounded-xl">
      <div class="flex flex-col items-center space-y-3">
        <p-progressSpinner styleClass="w-8 h-8" strokeWidth="4"/>
        <span class="text-gray-300">Loading Bookdrop files. Please wait...</span>
      </div>
    </div>

  } @else {

    <div class="px-6 pb-2">
      @if (saving) {
        <div class="absolute inset-0 bg-black bg-opacity-50 flex flex-col items-center justify-center z-50 rounded-xl space-y-3">
          <p-progressSpinner styleClass="w-8 h-8" strokeWidth="4"/>
          <div class="bg-gray-900/90 px-4 py-2 rounded-md">
            <span class="text-sm text-gray-200 text-center">
              Organizing and moving files to their designated libraries. Please wait...
            </span>
          </div>
        </div>
      }

      @if (bookdropFileUis.length !== 0) {

        <div class="flex gap-2 items-center px-1 pb-4 w-full">
          <label for="uploadPatternInput" class="text-sm text-gray-300 font-medium">File Naming Pattern:</label>
          <input
            id="uploadPatternInput"
            fluid
            class="min-w-[20rem] max-w-[45.5rem]"
            pSize="small"
            type="text"
            pInputText
            [(ngModel)]="uploadPattern"
            placeholder="e.g., {title} - {authors}"/>
          <i
            class="pi pi-info-circle text-blue-500 cursor-help"
            pTooltip="Sets the filename pattern used when moving files from bookdrop folder to the library, using metadata placeholders like {title}, {authors}, etc."
            tooltipPosition="top"
            style="font-size: 1rem; margin-left: 0.25rem;"></i>
        </div>

        <div class="flex justify-between items-center gap-4 px-1">

          <div class="flex gap-4 items-center">
            <span class="text-sm text-gray-300 font-medium">Library for All Files:</span>
            <p-select
              size="small"
              [options]="libraryOptions"
              optionLabel="label"
              optionValue="value"
              placeholder="Select Default Library"
              class="min-w-[8rem] max-w-[16rem]"
              [(ngModel)]="defaultLibraryId">
            </p-select>

            <span class="text-sm text-gray-300 font-medium">Subpath for All Files:</span>
            <p-select
              size="small"
              [options]="selectedLibraryPaths"
              optionLabel="label"
              optionValue="value"
              placeholder="Select Default Subpath"
              class="min-w-[8rem] max-w-[16rem]"
              [(ngModel)]="defaultPathId">
            </p-select>

            <p-button
              size="small"
              label="Apply to All"
              icon="pi pi-check"
              [disabled]="!canApplyDefaults"
              (click)="applyDefaultsToAll()"
              pTooltip="Apply selected library and subpath to all files"
              tooltipPosition="top">
            </p-button>
          </div>

          <div class="flex gap-4">
            <p-button
              size="small"
              outlined
              severity="info"
              label="Apply (w/ Cover)"
              icon="pi pi-copy"
              (click)="copyAll(true)"
              pTooltip="For all files, replace current metadata with fetched metadata, including cover images"
              tooltipPosition="top">
            </p-button>

            <p-button
              size="small"
              outlined
              severity="info"
              label="Apply (no Cover)"
              icon="pi pi-copy"
              (click)="copyAll(false)"
              pTooltip="For all files, replace current metadata with fetched metadata, excluding cover images"
              tooltipPosition="top">
            </p-button>

            <p-button
              size="small"
              outlined
              severity="warn"
              label="Reset"
              icon="pi pi-refresh"
              (click)="resetAll()"
              pTooltip="Reset all metadata changes"
              tooltipPosition="left">
            </p-button>
          </div>
        </div>
      }
    </div>

    <div class="flex-1 overflow-y-auto px-6 space-y-2 pb-4">
      @if (bookdropFileUis.length === 0) {
        <div class="h-full w-full flex items-center justify-center text-gray-400 italic py-8">
          No bookdrop files to review.
        </div>
      } @else {
        @for (file of bookdropFileUis; track file) {

          <div class="flex flex-col">
            <div class="flex items-center gap-4 custom-border rounded-xl px-4 py-2">

              <p-checkbox
                [binary]="true"
                [(ngModel)]="file.selected"
                (ngModelChange)="toggleFileSelection(file.file.id, $event)">
              </p-checkbox>

              <i
                class="pi pi-circle-fill"
                [ngStyle]="{'color': file.file.fetchedMetadata ? 'green' : 'darkorange'}"
                style="font-size: 0.75rem"
                pTooltip="{{file.file.fetchedMetadata ? 'Fetched metadata is available.' : 'No fetched metadata available.'}}"
                tooltipPosition="top">
              </i>

              @if (file.metadataForm.get('thumbnailUrl')?.value) {
                <img
                  [src]="file.metadataForm.get('thumbnailUrl')?.value"
                  alt="Cover"
                  title="Original cover"
                  class="w-6 h-8 rounded-sm object-cover cursor-pointer hover:scale-105 hover:shadow-md transition-transform duration-200"
                  (click)="file.showDetails = !file.showDetails"/>
              }

              @if (file.file.fetchedMetadata?.thumbnailUrl) {
                <img
                  [src]="file.file.fetchedMetadata?.thumbnailUrl"
                  alt="Fetched Cover"
                  title="Fetched cover"
                  class="w-6 h-8 rounded-sm object-cover cursor-pointer hover:scale-105 hover:shadow-md transition-transform duration-200"
                  (click)="file.showDetails = !file.showDetails"/>
              }

              <div class="flex-1 font-medium text-sm truncate" (click)="file.showDetails = !file.showDetails">
                {{ file.file.fileName }}
              </div>

              <i
                class="pi"
                [ngClass]="{
                  'pi-check-circle text-green-500': copiedFlags[file.file.id],
                  'pi-check-circle text-blue-500': !file.file.fetchedMetadata,
                  'pi-exclamation-triangle text-red-500': file.file.fetchedMetadata && !copiedFlags[file.file.id]
                }"
                [pTooltip]="copiedFlags[file.file.id]
                  ? 'Fetched metadata has been applied.'
                  : !file.file.fetchedMetadata
                    ? 'No fetched metadata available. Original metadata will be used.'
                    : 'Fetched metadata hasn’t been applied yet. Open metadata picker to review.'"
                tooltipPosition="top">
              </i>

              <p-select
                size="small"
                [options]="libraryOptions"
                optionLabel="label"
                optionValue="value"
                placeholder="Select Library"
                class="min-w-[8rem] max-w-[16rem]"
                [(ngModel)]="file.selectedLibraryId"
                (onChange)="onLibraryChange(file)">
              </p-select>

              <p-select
                size="small"
                [options]="file.availablePaths"
                optionLabel="name"
                optionValue="id"
                placeholder="Select Subpath"
                class="min-w-[8rem] max-w-[16rem]"
                appendTo="body"
                [(ngModel)]="file.selectedPathId">
              </p-select>

              <p-button
                size="small"
                [icon]="file.showDetails ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
                (click)="file.showDetails = !file.showDetails"
                tooltipPosition="top">
              </p-button>
            </div>

            @if (file.showDetails) {
              <app-bookdrop-file-metadata-picker-component
                class="px-12 py-8 custom-border1"
                [originalMetadata]="file.file.originalMetadata"
                [fetchedMetadata]="file.file.fetchedMetadata!"
                [metadataForm]="file.metadataForm"
                [copiedFields]="file.copiedFields"
                [savedFields]="file.savedFields"
                [bookdropFileId]="file.file.id"
                (metadataCopied)="onMetadataCopied(file.file.id, $event)">
              </app-bookdrop-file-metadata-picker-component>
            }
          </div>
        }
      }
    </div>

    <p-divider></p-divider>

    <div class="pb-2 px-4 flex items-center justify-between gap-4">

      <div class="flex gap-4 items-center min-w-[160px] justify-start">
        @if (bookdropFileUis.length > 0) {
          <p-button
            label="Select All"
            icon="pi pi-check-square"
            severity="info"
            (click)="selectAll(true)"
            outlined
            pTooltip="Select all files across all pages you have navigated"
            tooltipPosition="top">
          </p-button>

          <p-button
            label="Clear All"
            icon="pi pi-times-circle"
            severity="warn"
            (click)="selectAll(false)"
            outlined
            pTooltip="Deselect all files across all pages you have navigated"
            tooltipPosition="top">
          </p-button>
        } @else {
          <div class="min-w-[160px]"></div>
        }
      </div>

      <!-- Center container: paginator, flex-grow and centered -->
      <div class="flex-grow flex justify-center">
        <p-paginator
          [rows]="pageSize"
          [totalRecords]="totalRecords"
          [first]="currentPage * pageSize"
          (onPageChange)="loadPage($event.page ?? 0)"
          [showCurrentPageReport]="true"
          currentPageReportTemplate="Showing files {first} - {last} of {totalRecords}">
        </p-paginator>
      </div>

      <!-- Right container: fixed width, right aligned -->
      <div class="flex gap-4 items-center min-w-[200px] justify-end">
        <p-button
          [label]="'Delete ' + selectedCount + ' File' + (selectedCount !== 1 ? 's' : '')"
          icon="pi pi-times"
          severity="danger"
          [disabled]="!hasSelectedFiles"
          outlined
          (click)="confirmDelete()"
          pTooltip="Permanently delete selected Bookdrop files and discard any changes"
          tooltipPosition="top">
        </p-button>
        <p-button
          [label]="saving ? ('Finalizing ' + selectedCount + ' File' + (selectedCount !== 1 ? 's' : '') + '...') : ('Finalize ' + selectedCount + ' File' + (selectedCount !== 1 ? 's' : ''))"
          [icon]="saving ? 'pi pi-spin pi-spinner' : 'pi pi-save'"
          severity="success"
          outlined
          [disabled]="!canFinalize || saving"
          (click)="confirmFinalize()"
          pTooltip="Move selected files into the chosen library and subpath">
        </p-button>
      </div>

    </div>
  }
</div>
